<template>
  <div 
    :class="$style.container" 
    class="iLike">
    <el-card>
      <dl>
        <dt>
          <p>猜你喜欢<b>为您甄选最合适的</b></p>
        </dt>
        <dd 
          v-for="(item) in lists"
          :key="item.doubanId" 
          @click.stop="handleBuyClick(item)">
          <img v-lazy="item.poster">
          <h4>{{ item.original_title }}</h4>
          <el-rate 
            v-model="item.rate"
            :max="10" 
            style="display:inline-block;margin-right:10px;" 
            disabled
          />
          <p :class="$style.count">{{ item.ratings_count }} 人评论过</p>
          <p :class="$style.price"><small>￥<strong>{{ item.price }}</strong>起</small></p>
        </dd>
      </dl>
    </el-card>
  </div>
</template>

<script>
import http from '../../APIService/http'
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     * 立即购买
     */
    async handleBuyClick(item) {
      try {
        let token = this.$cookiz.get(this.$api.token)
        if (!token) {
          this.$store.commit('SET_SHOW', true)
          return false
        }
        let params = {
          id: item.doubanId
        }
        let res = await http.post(`/cart/addCart?token=${token}`, params)
        if (res.code === 0) {
          this.$router.push({
            path: '/cart'
          })
        }
      } catch (err) {
        throw err
      }
    }
  }
}
</script>

<style lang='scss' module>
.container {
  margin-top: 20px;
  margin-bottom: 20px;
  dl {
    dt {
      p {
        font-size: 20px;
        color: #222;
        font-weight: 500;
        b {
          font-size: 14px;
          color: #666;
          margin-left: 10px;
          font-weight: 400;
        }
      }
    }
    &:after {
      display: block;
      content: ' ';
      overflow: hidden;
      clear: both;
    }
    dd {
      margin-top: 10px;
      float: left;
      width: 25%;
      height: 230px;
      padding: 10px;
      box-sizing: border-box;
      cursor: pointer;
      img {
        width: 100%;
        height: 140px;
        object-fit: cover;
      }
      h4 {
        font-size: 14px;
        color: #222;
        line-height: 20px;
        width: 100%;
        margin: 0;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .count {
        font-size: 12px;
        color: #999;
        width: 100%;
        height: 18px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .price {
        font-size: 14px;
        font-weight: 700;
        color: #f60;
        strong {
          margin: 0 5px;
          font-size: 22px;
        }
      }
    }
  }
}
</style>
<style scoped>
.iLike >>> .el-rate__icon {
  font-size: 12px;
}
</style>
